<template>
  <div class="box">
    <div class="top" style="padding: 0 10px">
      <div class="tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="部门能耗查询" name="1"></el-tab-pane>
          <el-tab-pane label="部门能耗分析" name="2"></el-tab-pane>
          <el-tab-pane label="部门能耗考核" name="3"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="main">
      <Query v-if="activeName === '1'"></Query>
      <Analysis v-else-if="activeName === '2'"></Analysis>
      <Examine v-else></Examine>
    </div>
  </div>
</template>

<script>
import Query from './Query/index.vue'
import Analysis from './Analysis/index.vue'
import Examine from './Examine/index.vue'
export default {
  name: 'DepartmentEnergyConsumption',
  components: { Query, Analysis, Examine },
  data () {
    return {
      activeName: '1'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__item {
  padding: 0 60px;
}
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .tab {
    background-color: #fff;
    padding: 0 20px;
  }
  .main {
    flex: 1;
    // width: 100%;
    // height: 100%;
    // background-color: #fff;
  }
}
</style>
